import { useSelector, useDispatch } from "react-redux";
import { useEffect, useRef } from "react";
import DeviceInfo from "../../components/DeviceInfo";
import "./index.css";

export default function Info() {
  const infoList = [
    {
      name: "M1电机转矩",
      title: "M1电机转矩",
      value: "------",
    },
    {
      name: "M1电机电流",
      title: "M1电机电流",
      value: "------",
    },
    {
      name: "M2电机转矩",
      title: "M2电机转矩",
      value: "------",
    },
    {
      name: "M1电机温度",
      title: "M1电机温度",
      value: "------",
    },
    {
      name: "M2电机温度",
      title: "M2电机温度",
      value: "------",
    },
    {
      name: "电池最高温度",
      title: "电池最高温度",
      value: "------",
    },
    {
      name: "电池最低温度",
      title: "电池最低温度",
      value: "------",
    },
    {
      name: "急停开关",
      title: "急停开关",
      value: "------",
    },
    {
      name: "自检",
      title: "自检",
      value: "------",
    },
    {
      name: "航向角",
      title: "航向角",
      value: "------",
    },
  ];
  return (
    <div className="full grid column_3">
      <div className="grid-item">
        <DeviceInfo className="column_1" title="电机信息">
          {infoList.map((item) => {
            return (
              <div className="grid-item justify_between listItem1">
                <span>{item.title}:</span>
                <span>{item.value}</span>
              </div>
            );
          })}
        </DeviceInfo>
      </div>
      <div className="grid-item">
        <DeviceInfo className="column_1" title="电池信息">
          {infoList.map((item) => {
            return (
              <div className="grid-item justify_between listItem1">
                <span>{item.title}:</span>
                <span>{item.value}</span>
              </div>
            );
          })}
        </DeviceInfo>
        <DeviceInfo className="column_2" title="VCU信息">
          {infoList.map((item) => {
            return (
              <div className="grid-item justify_between listItem2">
                <span>{item.title}:</span>
                <span>{item.value}</span>
              </div>
            );
          })}
        </DeviceInfo>
      </div>
      <div className="grid-item">
        <DeviceInfo infoList={infoList} className="column_2" title="VCU信息">
          {infoList.map((item) => {
            return (
              <div className="grid-item justify_between listItem2">
                <span>{item.title}:</span>
                <span>{item.value}</span>
              </div>
            );
          })}
        </DeviceInfo>
      </div>
    </div>
  );
}
